<template>
	<view class="box flex flex-center" :class="{overlay:overlay}" @click.stop="" @touchstart.stop="">
		<view :class="`loader${props.loader}`" ></view>
	</view>
</template>

<script setup>
	import { defineProps } from "vue";
	const props = defineProps({
		overlay: {
			default: false,
			type: Boolean
		},
		loader: {
			default: '2',
			type: String
		}
	})
</script>

<style scoped>
	.box {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}

	.overlay {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.loader1 {
		width: 60rpx;
		aspect-ratio: 1;
		color: #3D5CFF;
		background:
			linear-gradient(currentColor 0 0) 100% 0,
			linear-gradient(currentColor 0 0) 0 100%;
		background-size: 50.1% 50.1%;
		background-repeat: no-repeat;
		animation: animation1 1s infinite steps(1);
	}

	.loader1::before,
	.loader1::after {
		content: "";
		position: absolute;
		inset: 0 50% 50% 0;
		background: currentColor;
		transform: scale(var(--s, 1)) perspective(150px) rotateY(0deg);
		transform-origin: bottom right;
		animation: animation1-1 .5s infinite linear alternate;
	}

	.loader1::after {
		--s: -1, -1;
	}

	@keyframes animation1 {
		0% {
			transform: scaleX(1) rotate(0deg)
		}

		50% {
			transform: scaleX(-1) rotate(-90deg)
		}
	}

	@keyframes animation1-1 {
		49.99% {
			transform: scale(var(--s, 1)) perspective(150px) rotateX(-90deg);
			filter: grayscale(0)
		}

		50% {
			transform: scale(var(--s, 1)) perspective(150px) rotateX(-90deg);
			filter: grayscale(0.8)
		}

		100% {
			transform: scale(var(--s, 1)) perspective(150px) rotateX(-180deg);
			filter: grayscale(0.8)
		}
	}



	.loader2 {
		width: 80rpx;
		height: 80rpx;
		color: #3D5CFF;
		background:
			conic-gradient(from -45deg at top 20px left 50%, #0000, currentColor 1deg 90deg, #0000 91deg),
			conic-gradient(from 45deg at right 20px top 50%, #0000, currentColor 1deg 90deg, #0000 91deg),
			conic-gradient(from 135deg at bottom 20px left 50%, #0000, currentColor 1deg 90deg, #0000 91deg),
			conic-gradient(from -135deg at left 20px top 50%, #0000, currentColor 1deg 90deg, #0000 91deg);
		animation: animation2 1s infinite cubic-bezier(0.3, 1, 0, 1);
	}

	@keyframes animation2 {
		50% {
			width: 120rpx;
			height: 120rpx;
			transform: rotate(180deg)
		}

		100% {
			transform: rotate(360deg)
		}
	}



	.loader3 {
		width: 80px;
		height: 40px;
		border-radius: 100px 100px 0 0;
		position: relative;
		overflow: hidden;
	}

	.loader3:before {
		content: "";
		position: absolute;
		inset: 0 0 -100%;
		background:
			radial-gradient(farthest-side, #ffd738 80%, #0000) left 70% top 20%/15px 15px,
			radial-gradient(farthest-side, #020308 92%, #0000) left 65% bottom 19%/12px 12px,
			radial-gradient(farthest-side, #ecfefe 92%, #0000) left 70% bottom 20%/15px 15px,
			linear-gradient(#9eddfe 50%, #020308 0);
		background-repeat: no-repeat;
		animation: animation3 2s infinite;
	}

	@keyframes animation3 {

		0%,
		20% {
			transform: rotate(0)
		}

		40%,
		60% {
			transform: rotate(.5turn)
		}

		80%,
		100% {
			transform: rotate(1turn)
		}
	}






	.loader4 {
		height: 40px;
		aspect-ratio: .866;
		display: grid;
		background: conic-gradient(from -121deg at right, #0000, #BF1E62 1deg 60deg, #0000 61deg);
		animation: animation4 2s infinite linear;
		transform-origin: 33% 50%;
	}

	.loader4:before,
	.loader4:after {
		content: "";
		grid-area: 1/1;
		background: conic-gradient(from -121deg at right, #0000, #FFA588 1deg 60deg, #0000 61deg);
		transform-origin: inherit;
		animation: inherit;
	}

	.loader4:after {
		background: conic-gradient(from -121deg at right, #0000, #027B7F 1deg 60deg, #0000 61deg);
		animation-duration: 3s;
	}

	@keyframes animation4 {
		100% {
			transform: rotate(1turn)
		}
	}
	
	
	
	.loader5 {
	  width: 60rpx;
	  aspect-ratio: 1;
	  display: grid;
	  border-radius: 50%;
	  background:
	    linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
	    linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
	  background-repeat: no-repeat;
	  animation: animation5 1s infinite steps(12);
	}
	.loader5::before,
	.loader5::after {
	   content: "";
	   grid-area: 1/1;
	   border-radius: 50%;
	   background: inherit;
	   opacity: 0.915;
	   transform: rotate(30deg);
	}
	.loader5::after {
	   opacity: 0.83;
	   transform: rotate(60deg);
	}
	@keyframes animation5 {
	  100% {transform: rotate(1turn)}
	}
	
	
	
	.loader6 {
	  width: 48px;
	  height: 48px;
	  margin: auto;
	  position: relative;
	}
	
	.loader6:before {
	  content: '';
	  width: 48px;
	  height: 5px;
	  background: #5886f050;
	  position: absolute;
	  top: 60px;
	  left: 0;
	  border-radius: 50%;
	  animation: animation6-1 0.5s linear infinite;
	}
	
	.loader6:after {
	  content: '';
	  width: 100%;
	  height: 100%;
	  background: #5886f0;
	  position: absolute;
	  top: 0;
	  left: 0;
	  border-radius: 4px;
	  animation: animation6 0.5s linear infinite;
	}
	
	@keyframes animation6 {
	  15% {
	    border-bottom-right-radius: 3px;
	  }
	
	  25% {
	    transform: translateY(9px) rotate(22.5deg);
	  }
	
	  50% {
	    transform: translateY(18px) scale(1, .9) rotate(45deg);
	    border-bottom-right-radius: 40px;
	  }
	
	  75% {
	    transform: translateY(9px) rotate(67.5deg);
	  }
	
	  100% {
	    transform: translateY(0) rotate(90deg);
	  }
	}
	
	@keyframes animation6-1 {
	  0%,
	    100% {
	    transform: scale(1, 1);
	  }
	
	  50% {
	    transform: scale(1.2, 1);
	  }
	}
</style>